<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

        <title>生命进度条</title>

        <style media="screen">
        </style>
    </head>
    <body>
        <div class="container" style="margin-top: 20px; width: 100%;">
            <div class="row">
                <div class="col-sm-8 input-group">
                    <span class="input-group-addon" id="basic-addon3">周岁年龄</span>
                    <input class="form-control" id="born" type="text" name="" value="28">
                </div>
            </div>

            <table class="table" style="margin-top: 20px;">
              <tbody>
                <tr>
                  <th scope="row" style="width: 60px;">分钟</th>
                  <td>
                      <div class="progress">
                          <div id="minute" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" style="width: 1%"></div>
                      </div>
                  </td>
                </tr>
                <tr>
                    <th scope="row" style="width: 60px;">小时</th>
                    <td>
                        <div class="progress">
                            <div id="hour" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" style="width: 1%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th scope="row" style="width: 60px;">今天</th>
                    <td>
                        <div class="progress">
                            <div id="day" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" style="width: 1%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th scope="row" style="width: 60px;">本月</th>
                    <td>
                        <div class="progress">
                            <div id="month" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" style="width: 1%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th scope="row" style="width: 60px;">今年</th>
                    <td>
                        <div class="progress">
                            <div id="year" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" style="width: 1%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th scope="row" style="width: 60px;">生命</th>
                    <td>
                        <div class="progress">
                            <div id="life" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" style="width: 1%"></div>
                        </div>
                    </td>
                </tr>
              </tbody>
            </table>

        </div>
    </body>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

    <script type="text/javascript">
    var life_max = 80;

    function refresh(){
        var oDate = new Date(); //实例一个时间对象；
        var year = ($('#born').val() / life_max).toFixed(2) * 100;
        var month = ((oDate.getMonth() + 1) / 12).toFixed(2) * 100;   //获取系统月份，由于月份是从0开始计算，所以要加1

        var some_month = new Date(oDate.getFullYear(), month,0);
        var daycount = some_month.getDate();

        var second = (oDate.getSeconds() / 60).toFixed(2) * 100;
        var minute = (oDate.getMinutes() / 60).toFixed(2) * 100; //分
        var hour = (oDate.getHours() / 24).toFixed(2) * 100; //获取系统时，
        var day = (oDate.getDate() / daycount).toFixed(2) * 100; // 获取系统日，
        // var year = oDate.getFullYear();   //获取系统的年；

        $("#minute").css('width', second + "%");
        $("#hour").css('width', minute + "%");
        $("#day").css('width', hour + "%");
        $("#month").css('width', day + "%");
        $("#year").css('width', month + "%");
        $("#life").css('width', year + "%");
        // console.log(month + "%")

        change_color(second, 'minute');
        change_color(minute, 'hour');
        change_color(hour, 'day');
        change_color(day, 'month');
        change_color(month, 'year');
    }

    function change_color(value, selector){
        $('#' + selector).removeClass("bg-success bg-info bg-warning bg-danger");
        if (value < 25) {
            $('#' + selector).addClass("bg-success");
        }else if (value < 50) {
            $('#' + selector).addClass("bg-info");
        }else if (value < 75) {
            $('#' + selector).addClass("bg-warning");
        }else{
            $('#' + selector).addClass("bg-danger");
        }
    }

    $(function(){
        setInterval("refresh()", 1000);
     })
    </script>
</html>
